<template>
  <div>
    <h3 style="text-align: center">考试成绩统计</h3>
    <el-table
        :data="tableData"
        stripe
        style="width: 100%;margin-top: 10px">
      <el-table-column
          prop="exam"
          label="考试科目">
      </el-table-column>
      <el-table-column
          prop="examName"
          label="试卷名称">
      </el-table-column>
      <el-table-column
          prop="number"
          label="考试人数"
          align="center">
      </el-table-column>
      <el-table-column
          prop="max"
          label="最高分"
          align="center">
      </el-table-column>
      <el-table-column
          prop="min"
          label="最低分"
          align="center">
      </el-table-column>
      <el-table-column
          prop="avg"
          label="平均分"
          align="center">
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { $post, $get } from "@/api/Api.js";
import { ref,onMounted,toRefs } from "vue";
import { useStore } from 'vuex'
import { useRouter } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let UserInfo = storageHelper.getUserInfo();
let router = useRouter();
let store = useStore()
const props = defineProps({
  vm: {
      type: Array
    }
});
let { vm} = toRefs(props);
let tableData=ref([])
onMounted(()=>{
  for (let i = 0; i < vm.value.length; i++) {
      for (let j = 0; j < vm.value[i].examNames.length; j++) {
        if(vm.value[i].userList[j]?.length){
          tableData.value.push({
          exam: vm.value[i].name,
          examName: vm.value[i].examNames[j],
          number: vm.value[i].userList[j].length,
          max: vm.value[i].max[j],
          avg: vm.value[i].avg[j],
          min: vm.value[i].min[j]
        })

        }
       
      }
    }
})
</script>
  
  <style  scoped lang='less'>
      .el-table{
       overflow-y: auto;
        height: 560px;
       }
      
  </style>